<template>
    <div class="bg">
        <div class="login-container">
            <div>点餐系统后台</div>
            <el-form :model="addModel" ref="form" :rules="rules" label-width="80px" :inline="false" size="default">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addModel.username" placeholder="请填写用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addModel.password" placeholder="请填写密码"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="success" @click="handleSubmit()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { userStore } from '@/store/user';
import { loginApi } from '@/api/login';
//表单绑定的对象
const addModel = reactive({
    username: '',
    password: ''
})

const store = userStore();
const router = useRouter();


onMounted(() => {
    store.autoLogin(); // 尝试自动登录
    if (localStorage.getItem('key') != '' && localStorage.getItem('key')) {
        router.push('/user');
    } else {
        router.push('/login');
    }
});

const handleSubmit = async() => {
    let result = await loginApi(addModel)
    if(result && result.code == 200){
        localStorage.setItem('key', result.data);
        ElMessage.success(result.msg)
        router.push('/user');
    }else {
        ElMessage.error(result.msg)
    }
};

//表单验证规则
const rules = reactive({
    username: [{
        required: true,
        message: '请填写用户名',
        trigger: "blur",
    },],
    password: [{
        required: true,
        message: '请填写密码',
        trigger: "blur",
    },],
});

</script>

<style scoped>
/* 整个页面的布局样式 */
html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    /* 备用背景颜色 */
}

.bg {
    position: relative;
    /* 使用相对定位 */
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    /* 背景颜色 */
    background-image: url('../../assets/login-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 使用Flexbox布局来居中登录表单 */
.login-container {
    width: 100%;
    max-width: 500px;
    /* 限制最大宽度 */
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    /* 半透明白色背景 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* 边框计算在宽度内 */
}

/* 标题样式 */
.login-container>div {
    margin-left: 35%;
    margin-bottom: 20px;
    /* 与表单保持一定距离 */
    font-size: 24px;
    /* 标题字体大小 */
    font-weight: bold;
    /* 字体加粗 */
    color: #fff;
    /* 文字颜色，假设背景较暗 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* 添加文字阴影，提高可读性 */
}

.el-form {
    width: 100%;
    /* 表单宽度占满容器 */
    padding: 0;
    /* 去掉表单的内边距，内边距由登录容器处理 */
}

/* 表单标题样式，调整为黑色文字 */
.el-form-item__label {
    font-weight: bold;
    color: #333;
}

/* 输入框样式 */
.el-input__inner {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background: #fff;
    /* 白色背景以便在半透明背景上清晰显示 */
    color: #333;
    /* 字体颜色 */
}

/* 输入框聚焦时的样式 */
.el-input__inner:focus {
    border-color: #409eff;
}

.btn{
    margin-left: 65%;
}

/* 按钮样式 */
.el-button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
}

/* 按钮悬浮时的样式 */
.el-button:hover {
    opacity: 0.9;
}
</style>